<template>
	<view class="content">
		<view class="cont">
			<view class="des">
				<view class="des_top">品牌馆</view>
				<view class="des_bottom">BRANFD</view>
			</view>

			<view class="log">
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="clear"></view>
		</view>
		<!-- 列表部分 -->
		<view class="lists">
			<scroll-view scroll-x="true" class="scroll">
				<view class="box" v-for="(item,index) in branfdList" @click="goDetail()" :key='index'>
					<view class="img">
						<image :src="item.storeIcon" mode=""></image>
					</view>
					<view class="ico">
						<text class="ico_text">{{item.storeScore}}</text>
						<text class="icon iconfont">&#xe65a;</text>
						<text class="icon iconfont">&#xe65a;</text>
						<text class="icon iconfont">&#xe65a;</text>
					</view>
					<view>
						<view class="box_top">
							<view class="left">{{item.storeName}}</view>
							<view class="right">服务 768</view>
						</view>
						<view class="box_bottom">
							<view class="left">{{item.storeAddress}}</view>
							<view class="right">7.5km</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="hr"></view>
	</view>
</template>

<script>
	import {BrandPavilion} from "@/api/index.js"
	export default {
		data() {
			return {
				scrollTop: 0,
				branfdList:[
					{
						storeIcon:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604577956922&di=105d47551d2ece55c6dd090ae0abaac0&imgtype=0&src=http%3A%2F%2Fku.90sjimg.com%2Felement_origin_min_pic%2F17%2F08%2F04%2F18b95be672ffbfb252e1efddf3be33dd.jpg',
						storeScore:'4',
						storeName:'成都',
						storeAddress:'天府三街',
						
					}
				],
				old: {
					scrollTop: 0
				},
				data:{
					city:'成都市'
				}
			}
		},
		created() {
			this.getData()	
		},
		methods: {
			
			getData(){
				BrandPavilion(this.data).then(res =>{
					console.log('品牌馆',res[1].data);
					this.branfdList = res[1].data.data
				})
			},
			scroll(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			goDetail(){
				uni.navigateTo({
					url:'/pages/index/home_design/index'
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.hr {
		// width: 750px;
		width: 100%;
		height: 12px;
		background: #E7E7E7;
		margin-top: 50rpx;
	}

	.content {

		.cont {
			width: 100%;
			padding: 14rpx 5rpx;

			.des {
				float: left;
				// margin-left: 10rpx;
				border-left: 7rpx solid #141414;
				margin-left: 25rpx;
				padding-left: 9rpx;

				.des_top {

					font-size: 30rpx;
					font-family: PingFang;
					font-weight: bold;
					color: #333333;

				}

				.des_bottom {
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
				}
			}

			.log {
				float: right;
				padding-right: 27rpx;
				opacity: 0.5;
			}

			.clear {
				clear: both;
			}

		}

		.lists {
			// width: 100%;
			margin: 25rpx 25rpx;

			// height: 320rpx;
			// border: 1px solid red;
			overflow: hidden;

			.scroll {
				width: 100%;
				// height: 620rpx;
				// height: 320rpx;

				overflow: hidden;
				white-space: nowrap;

				.box {
					display: inline-block;
					width: 485rpx;
					height: 252rpx;
					// height: 600upx;
					height: 100%;

					box-shadow: -4rpx 0px 7rpx 0px rgba(203, 203, 203, 0.49);
					border-radius: 4rpx;
					margin-right: 13rpx;

					.img {
						width: 100%;
						height: 252rpx;
						background: #00C6C2;
						
						image{
							width: 100%;
							height: 100%;
						}
					}

					.ico {
						margin-top: -60rpx;
						// margin-bottom: 10rpx;
						padding-bottom: 26rpx;
						padding-left: 25rpx;

						.ico_text {

							font-size: 20rpx;
							font-family: PingFang;
							font-weight: 500;
							color: #FFFFFF;

						}
					}

					.iconfont {
						color: #F2CB51;
						font-size: 16rpx;
						padding-left: 10rpx;
						// width: 11.8rpx;
						// height: 11rpx;
					}

					.box_top {

						width: 100%;
						height: 20rpx;
						position: relative;
						margin-bottom: 10rpx;

						.left {
							position: absolute;
							left: 10rpx;

							font-size: 22rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #404040;
						}

						.right {
							position: absolute;
							right: 10rpx;

							font-size: 18rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #000000;
						}

					}

					.box_bottom {
						position: relative;
						height: 20rpx;
						padding-bottom: 10rpx;

						.left {
							position: absolute;
							left: 10rpx;
							font-size: 18rpx;
							font-family: PingFang;
							font-weight: bold;
							color: #8B8B8B;
						}

						.right {
							position: absolute;
							right: 10rpx;
							// float: right;
							font-size: 18rpx;
							font-family: PingFang;
							font-weight: bold;
							color: #8B8B8B;
						}

					}
				}
			}
		}
	}
</style>
